<template>
  <!-- 详情页 -->
  <view>
    <userListVue :item="info" :isDetail="true" @doSupport="doSupport">
      <!-- <view> -->
      <template>
        <image
          @click="preview(index)"
          class="w100"
          :src="item"
          mode="widthFix"
          lazy-load="false"
          binderror=""
          bindload=""
          v-for="(item, index) in imagesList"
          :key="index"
        >
        </image>
      </template>

      <!-- <image @click="preview(index)" class="w100" :src="imagesList[0]"> </image> -->
      <!-- </view> -->
    </userListVue>
    <!-- 评论列表 -->
    <view
      class="pd font-md"
      style="margin-bottom: 100rpx"
      v-if="contentList.length"
    >
      <view> 最新评论 {{ contentList.length }}</view>
      <view class="mt flex" v-for="(item, index) in contentList" :key="item.id">
        <image
          style="width: 66rpx; height: 66rpx; border-radius: 100%"
          mode="aspectFill"
          :src="item.user.userpic || '../../static/demo/datapic/10.jpg'"
        >
        </image>
        <view class="flex ml" style="flex-direction: column">
          <!-- 名称 -->
          <text class="font" style="color: #0a98d5">{{
            item.user.username
          }}</text>
          <!-- 内容 -->
          <text class="font-md mtb">{{ item.data }}</text>
          <!-- 时间 -->
          <text class="font">{{ item.create_time | time }}</text>
        </view>
      </view>
    </view>
    <!-- 占位符 -->
    <view style="height: 100rpx"> </view>

    <!-- 发送评论功能 -->
    <view class="pd flex plun">
      <input
        type="text"
        class="flex-1"
        v-model="content"
        placeholder="文明发言"
        @keydown.enter="post"
      />
      <!-- @confirm="post" -->
      <view class="animated" hover-class="mainColor jello" @click="post">
        <text class="iconfont icon-fabu" style="font-size: 50rpx"></text>
      </view>
    </view>

    <!-- <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="pd flex flex-s" style="height: 200rpx">
        <view class="t-c">
          <text class="iconfont bg-primary icon icon-QQ font-lg"></text>
          <view class=""> QQ </view>
        </view>
        <view class="t-c">
          <text class="iconfont bg-success icon icon-weixin font-lg"></text>
          <view class=""> 微信 </view>
        </view>
        <view class="t-c">
          <text class="iconfont icon bg-dark icon-huati font-lg"></text>
          <view class=""> 朋友圈 </view>
        </view>
        <view class="t-c">
          <text
            class="iconfont bg-danger icon icon-xinlangweibo font-lg"
          ></text>
          <view class=""> 新浪微博 </view>
        </view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script>
import userListVue from "@/components/common/user-list.vue";
import { getdetail, comment, postComment } from "@/api/api";
import $T from "@/common/time.js";
export default {
  components: { userListVue },
  filters: {
    time(value) {
      return $T.gettime(value);
    },
  },
  data() {
    return {
      content: "", //评论内容
      contentList: [], //评论列表
      info: {},
      imgList: [],
      commentData: {
        readNumer: 193,
        comment: [],
      },
    };
  },

  onReady() {
    uni.setNavigationBarTitle({
      title: this.info.title,
    });
  },
  async onLoad(e) {
    this.info = JSON.parse(e.data);
    console.log(this.info);
    let res = await getdetail(this.info.id);
    console.log("res.detail.images", res);
    if (res) {
      this.imgList = res.detail.images;
    }
    // 获取评论
    this.getcomment();
    // 监听事件 如果e.type是follow是关注 否则是点赞

    uni.$on("updateFollowOrSupport", (e) => {
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
    });
  },
  computed: {
    imagesList() {
      if (this.imgList.length <= 0) {
        return [];
      }
      return this.imgList.map((item) => item.url);
    },
  },
  methods: {
    // 发表评论
    post() {
      let obj = {
        fid: 0,
        data: this.content,
        post_id: this.info.id,
      };
      postComment(obj).then((res) => {
        if (res.statusCode === 400) {
          console.log("发布失败");
          uni.showToast({
            title: "发布失败",
            icon: "none",
          });
        }
        // console.log(res);
        if (res.data === this.content) {
          this.content = "";
          // console.log("评论成功");
          uni.showToast({
            title: "发布成功",
            icon: "none",
          });
          this.getcomment();
        }
      });
      // console.log("发布");
    },
    // 获取评论得功能
    getcomment() {
      console.log(this.info);
      comment(this.info.id).then((res) => {
        console.log(res);
        this.contentList = res.list;
      });
    },
    //   顶踩功能
    // 点赞
    doSupport(type) {
      // this.info.forEach((item) => {
      // console.log(item);
      let item = this.info;
      if (item.id === type.id) {
        // 之前没有操作过
        if (item.support.type === "") {
          item.support[type.type + "_count"]++;
        } else if (
          item.support.type === "support" &&
          type.type === "unsupport"
        ) {
          console.log("顶", item.support.support_count);
          // 顶 - 1
          item.support.support_count--;
          // 踩 + 1
          item.support.unsupport_count++;
        } else if (
          item.support.type === "unsupport" &&
          type.type === "support"
        ) {
          // 之前踩了
          // 顶 + 1
          console.log("不执行", item.support.support_count);
          if (item.support.support_count === -1) {
            item.support.support_count = 0;
          }
          item.support.support_count++;
          // 踩 - 1
          item.support.unsupport_count--;
        }
        item.support.type = type.type;
      }
      // });
    },
    // 关注功能
    follow(user_id) {
      if (this.info.user_id === user_id) {
        this.info.isFollow = true;
      }
      uni.showToast({ title: "关注成功" });
    },
    // 图片预览
    preview(index) {
      // console.log(index);
      uni.previewImage({
        current: index,
        urls: this.imagesList,
      });
    },
  },
  onNavigationBarButtonTap() {
    // console.log("毗邻");
    // 点击之后弹出一个模态框
    // this.$refs.popup.open("bottom");
    // this.$refs.showSheet_ref.open();
  },
};
</script>

<style lang="less" scoped>
.plun {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  border-top: 1px solid #ccc;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
  background: #fff;
}
.icon {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50%;
  display: block;
  color: #fff;
}
.bg-dark {
  background-color: #343a40;
}
.bg-success {
  background-color: #28a745;
}
.bg-danger {
  background-color: #dc3545;
}
.bg-primary {
  background-color: #007bff;
}
</style>
